<template>
    <div class="rubbish-wrap">
        <div class="rubbish-input">
            <InputTemplate v-model:url="url"></InputTemplate>
            <el-button class="input-btn" type="primary" @click="clearBookmark" :disabled="clearBtn">清空回收站</el-button>
        </div>
        <ListTemplate ref="listTemplateRef" filterType="isDelete" :isDeletable="true" :isClear="true"></ListTemplate>
    </div>
</template>

<script setup >
import { ref, watch, computed } from "vue";
import ListTemplate from '@/components/ListTemplate.vue'
import InputTemplate from '@/components/InputTemplate.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useWebStore } from "@/store/webStore";

const store = useWebStore()

const url = ref('')

const listTemplateRef = ref()

const clearBtn = computed(() => {
    return store.websites.filter(item => item.isDelete).length > 0 ? false : true
})

watch(url, (val) => {
    listTemplateRef.value.search(val)
})

const clearBookmark = () => {
    ElMessageBox.confirm(
        '是否确认清空回收站?此操作不可恢复！！！',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const message = await store.clearRubbish()
            ElMessage({
                type: 'success',
                message,
            })
        })
        .catch(() => {
            //用户取消操作
        })
}
</script>

<style lang='scss' scoped>
.rubbish-wrap {
    .rubbish-input {
        display: flex;
        align-items: center;
        margin-left: 20px;

        .input-btn {
            margin-left: 10px;
        }
    }
}

::v-deep(.el-input) {
    max-width: 500px;
}
</style>